<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>书签搜索</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="main-container">
    <div class="search-container">
      <div class="app-header">
        <img src="images/icon48.png" class="app-logo" alt="logo">
        <h1 class="app-title">BOOK-MARK PRO</h1>
      </div>
      <div class="search-wrapper">
        <div class="search-input-container">
          <input type="text" id="searchInput" placeholder="输入你想查找的书签...">
          <div class="ai-search-toggle">
            <label class="switch" title="开启/关闭AI语义检索">
              <input type="checkbox" id="aiSearchToggle">
              <span class="slider">
                <span class="ai-icon">AI</span>
              </span>
            </label>
          </div>
        </div>
      </div>
      <div class="search-results-count"></div>
      <div id="bookmarksList"></div>
    </div>
    <div class="preview-container">
      <div class="preview-toolbar">
        <button id="qrcodeButton" class="toolbar-button" title="显示页面二维码">
          <svg width="16" height="16" viewBox="0 0 16 16">
            <path d="M6 1H1v5h5V1zM2 2h3v3H2V2z"/>
            <path d="M15 1h-5v5h5V1zm-4 1h3v3h-3V2z"/>
            <path d="M6 10H1v5h5v-5zM2 11h3v3H2v-3z"/>
            <path d="M4 4h1v1H4V4zM13 4h1v1h-1V4zM4 13h1v1H4v-1z"/>
            <path d="M8 1h1v3H8V1zM8 5h1v1H8V5zM8 7h1v1H8V7zM8 9h1v1H8V9zM8 11h1v1H8v-1zM8 13h1v2H8v-2zM10 1h1v1h-1V1zM10 3h1v1h-1V3zM10 5h1v1h-1V5zM10 7h1v1h-1V7zM10 9h1v1h-1V9zM10 11h1v1h-1v-1zM10 13h1v2h-1v-2zM12 1h1v1h-1V1zM12 3h1v1h-1V3zM12 5h1v1h-1V5zM12 7h1v1h-1V7zM12 9h1v1h-1V9zM12 11h1v1h-1v-1zM12 13h1v2h-1v-2z"/>
          </svg>
        </button>
        <button id="openInNewButton" class="toolbar-button" title="在新标签页打开">
          <svg width="16" height="16" viewBox="0 0 16 16">
            <path d="M8 1v1.5h3.3L6.8 7 8 8.2l4.5-4.5V7H14V1z"/>
            <path d="M12 12H4V4h3V2H3a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8h-2z"/>
          </svg>
        </button>
        <button id="refreshButton" class="toolbar-button" title="刷新页面">
          <svg width="16" height="16" viewBox="0 0 16 16">
            <path d="M13.7 8c0-3.2-2.5-5.7-5.7-5.7-1.7 0-3.2.7-4.3 1.9h2.8v1.6H2V1.3h1.6v2.4C5.1 2.1 6.5 1.3 8 1.3c3.7 0 6.7 3 6.7 6.7h-1z"/>
            <path d="M2.3 8c0 3.2 2.5 5.7 5.7 5.7 1.7 0 3.2-.7 4.3-1.9H9.5v-1.6H14v4.5h-1.6v-2.4c-1.5 1.6-2.9 2.4-4.4 2.4-3.7 0-6.7-3-6.7-6.7h1z"/>
          </svg>
        </button>
      </div>
      <div class="preview-content">
        <div id="qrcodePopup" class="qrcode-popup">
          <div id="qrcodeContainer"></div>
          <div class="qrcode-hint">扫码查看网页内容</div>
        </div>
        <div class="preview-hint">👈 将鼠标悬停在左侧书签上预览内容</div>
        <div class="loading-indicator">
          <div class="loading-spinner">
            <div class="loading-spinner-inner"></div>
          </div>
          <div>页面加载中...</div>
        </div>
        <iframe id="previewFrame" sandbox="allow-same-origin allow-scripts allow-popups allow-forms"></iframe>
      </div>
    </div>
    <div id="previewCache" class="preview-cache"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html> 